<template>
	<div class="main">
		<div class="about_box">
			<div class="avatar">
				<div class="label">头像</div>
				<img v-if="user.Head" :src="base + user.Head" alt="" />
       			<img v-else src="@/assets/Images/AppIcon/common_default_header.png" alt="" />
			</div>
			<div>
				<div class="label">角色</div>
				<div class="text" style="line-height:24px">
					{{ user.UserKindName }}
				</div>
			</div>
			<div @click="_goEmail">
				<div class="label">邮箱</div>
				<div class="mr-10 text">{{ user.Email }}</div>
				<img src="@/assets/Images/AppIcon/icon_arrow_right.png" alt="" />
			</div>
			<div @click="_goPhone">
				<div class="label">手机</div>
				<div class="mr-10 text">{{ user.Mobile }}</div>
				<img src="@/assets/Images/AppIcon/icon_arrow_right.png" alt="" />
			</div>
		</div>
		<div class="change_password" @click="_ChangePassword">
			<div class="label">修改密码</div>
			<img src="@/assets/Images/AppIcon/icon_arrow_right.png" alt="" />
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex'

import { Toast } from 'vant'
var wait = 60
export default {
	components: {},
	data() {
		return {
			code: '',
			mobile: '',
			verifyCode: '',
			NewPassword: '',
			isPhone: false,
			user: {},
		}
	},
	computed: {
		...mapGetters(['baseUrl']),
	},
	created() {
		this.getUserInfo()
	},
	methods: {
		getUserInfo() {
			let url = '/UserUser/GetMyPersionalInfo' // /api/goods

			this.$axios
				.get(url)
				.then((res) => {
					this.user = res.data
				})
				.catch((err) => {
					console.log('err', err)
				})
		},
		_goEmail() {
			this.$router.push('/Home/My/email')
		},
		_goPhone() {
			this.$router.push('/Home/My/phone?phone=' + this.user.Mobile)
		},
		_ChangePassword() {
			this.$router.push('/Home/My/changePassword')
		},
	},
}
</script>

<style lang="less" scoped>
.about_box {
	background-color: #fff;
	.avatar {
		height: 80px;
		img {
			height: 50px;
			width: 50px;
			border-radius: 50%;
		}
	}
	> div {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 2px solid #e8f1f8;
		padding: 10px;
		display: flex;
		.label {
			width: 100px;
		}
		.text{
			text-align: right;
			flex: 1;
		}
	}
	img {
		height: 15px;
		width: 15px;
	}
}
.change_password {
	margin-top: 10px;
	padding: 10px;
	background-color: #fff;
	display: flex;
	justify-content: space-between;
	img {
		height: 15px;
		width: 15px;
	}
}
</style>

